<template>
	<view>
		<!-- 月份 -->
		<view class="month">
			<image src="./calendar-jiantou.png" mode="widthFix" @click="lastMonth"></image>
			<view>{{year+'.'+month}}</view>
			<image src="./calendar-jiantou.png" mode="widthFix" @click="nextMonth"></image>
		</view>
		<!-- 周 -->
		<view class="week">
			<view :class="'i '+[index==0|| index==week.length-1?'i1':'']" v-for="(item,index) in week" :key="index">
				{{item}}
			</view>
		</view>
		<!-- 天 -->
		<view class="day">
			<view class="i" v-for="(item,index) in dayList" :key="index">
				{{item}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				year: '',
				month: '',
				day: '',
				week: ['日', '一', '二', '三', '四', '五', '六'],
				dayList: [],
			}
		},
		watch: {
			month: function() {
				this.setDay();
			}
		},
		created() {
			this.setNow();
		},
		methods: {
			/**
			 * 设置当前年月日
			 */
			setNow() {
				let date = new Date();
				this.year = date.getFullYear();
				this.month = date.getMonth() + 1;
				this.day = date.getDate();
			},
			/**
			 * 下一个月
			 */
			nextMonth() {
				if (this.month + 1 > 12) {
					this.year = this.year + 1;
					this.month = 1;
				} else {
					this.month = this.month + 1;
				}
			},
			/**
			 * 上一个月
			 */
			lastMonth() {
				if (this.month - 1 < 1) {
					this.year = this.year - 1;
					this.month = 12;
				} else {
					this.month = this.month - 1;
				}
			},
			/**
			 * 设置日历天
			 */
			setDay() {
				let date = new Date(this.year, this.month - 1, 1);
				let date1 = new Date(this.year, this.month, 0);
				//获取当前月第一天是周几，0等于周日
				let oneDay = date.getDay();
				//获取当前月天数
				let monthDay = date1.getDate();
				let dayList = [];
				for (var i = 0; i < oneDay; i++) {
					dayList.push('')
				}
				for (var i = 0; i < monthDay; i++) {
					dayList.push(i + 1)
				}
				this.dayList = dayList;
			},
		}
	}
</script>

<style>
	.month {
		display: flex;
		margin-top: 40rpx;
		justify-content: space-between;
		align-items: center;
		height: 28rpx;
		padding: 0 70rpx;
	}

	.month image {
		width: 26rpx;
	}

	.month image:nth-child(1) {
		transform: rotate(180deg);
	}

	.month view {
		height: 28rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #333333;
		line-height: 28rpx;
		letter-spacing: 2rpx;
	}

	.week {
		display: flex;
		margin-top: 60rpx;
		text-align: center;
	}

	.week .i {
		width: 14.28%;
		font-size: 28rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #666666;
		line-height: 40rpx;
	}

	.week .i1 {
		color: #00CDCD;
	}

	.day {
		display: flex;
		flex-wrap: wrap;
	}

	.day .i {
		width: 14.28%;
		text-align: center;
		margin-top: 40rpx;
		color: #333333;
		font-size: 34rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 600;
		line-height: 48rpx;
		letter-spacing: 2rpx;
	}
</style>
